<template>
  <div class="performance-list">
    <a-card title="绩效列表" class="list-card">
      <template #extra>
        <a-button type="primary" @click="goToAdd">新增评估</a-button>
      </template>

      <div class="search-bar">
        <a-input-search
            v-model:value="searchKeyword"
            placeholder="输入员工姓名或工号搜索"
            @search="handleSearch"
            style="width: 300px"
        />
        <a-range-picker
            v-model:value="dateRange"
            style="margin-left: 10px"
            @change="handleDateChange"
        />
      </div>

      <a-spin :spinning="loading">
        <a-table
            :columns="columns"
            :data-source="performanceData"
            :pagination="pagination"
            row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'overallScore'">
              <a-progress
                  :percent="record.overallScore"
                  :stroke-color="getScoreColor(record.overallScore)"
                  :format="percent => `${percent}分`"
              />
            </template>
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === 1 ? 'green' : 'orange'">
                {{ record.status === 1 ? '已评估' : '待评估' }}
              </a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="viewDetail(record.id)">详情</a-button>
                <a-button
                    size="small"
                    type="primary"
                    @click="editPerformance(record.id)"
                    :disabled="record.status === 1"
                >
                  评估
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { getPerformanceList, getMockPerformanceList } from '@/api/performance'

const router = useRouter()

// 表格列配置
const columns = [
  {
    title: '员工姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '工号',
    dataIndex: 'employeeId',
    key: 'employeeId'
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department'
  },
  {
    title: '职位',
    dataIndex: 'position',
    key: 'position'
  },
  {
    title: '评估周期',
    dataIndex: 'evaluationPeriod',
    key: 'evaluationPeriod'
  },
  {
    title: '综合评分',
    key: 'overallScore',
    width: '200px'
  },
  {
    title: '状态',
    key: 'status'
  },
  {
    title: '评估人',
    dataIndex: 'evaluator',
    key: 'evaluator'
  },
  {
    title: '评估日期',
    dataIndex: 'evaluationDate',
    key: 'evaluationDate'
  },
  {
    title: '操作',
    key: 'action',
    width: '180px'
  }
]

// 数据状态
const performanceData = ref([])
const loading = ref(false)
const searchKeyword = ref('')
const dateRange = ref([])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true
})

// 根据分数获取颜色
const getScoreColor = (score) => {
  if (score >= 90) return '#52c41a'
  if (score >= 80) return '#1890ff'
  if (score >= 60) return '#faad14'
  return '#ff4d4f'
}

// 获取绩效列表
const fetchPerformanceList = async () => {
  loading.value = true
  try {
    // 实际项目中用这个
    // const res = await getPerformanceList({
    //   page: pagination.value.current,
    //   pageSize: pagination.value.pageSize,
    //   keyword: searchKeyword.value,
    //   startDate: dateRange.value[0],
    //   endDate: dateRange.value[1]
    // })

    // 开发阶段使用Mock数据
    const res = await getMockPerformanceList()
    performanceData.value = res.data.list
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取绩效列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  fetchPerformanceList()
}

// 日期范围变化
const handleDateChange = () => {
  fetchPerformanceList()
}

// 查看详情
const viewDetail = (id) => {
  router.push(`/performance/detail/${id}`)
}

// 编辑绩效
const editPerformance = (id) => {
  router.push(`/performance/edit/${id}`)
}

// 跳转到新增页面
const goToAdd = () => {
  router.push('/performance/add')
}

// 初始化加载数据
onMounted(() => {
  fetchPerformanceList()
})
</script>

<style scoped>
.performance-list {
  padding: 20px;
}

.list-card {
  border-radius: 8px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
</style>